<template>
    <div class="list">
        <el-row>
            <el-col :span="12" :offset="18">
                <el-button type="primary"  @click="downloadExl(1)">导出</el-button>
                <a href="" :download="downloadName" id="hf"></a>
                <el-button type="primary" icon="plus" @click="onAddPaper">添加试卷</el-button>
            </el-col>
        </el-row>
        <div class="divline"></div>

        <el-table :data="tableData" border style="width: 99%" align='center'>
            <el-table-column v-for="item in fields"
                :prop="item.info.prop" 
                :label="item.info.label"
                :align="item.style.align"
                :width="item.style.width"
                :sortable="item.info.sortable">
            </el-table-column>

            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-tooltip content="编辑试卷" placement="left">
                        <el-button type="info"   icon='edit'   size="mini" @click='onEditPaper(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="预览试卷" placement="top">
                        <el-button type="info" icon='document' size="mini" @click='previewPager(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="查看代码" placement="bottom">
                        <el-button type="info" icon='document' size="mini" @click='previewCode(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除试卷" placement="right">
                        <el-button type="danger" icon='delete' size="mini" @click='onDeletePager(scope.row)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column> 
        </el-table>
        <el-dialog
        title="试卷信息"
        v-model="dialogVisible">
            <el-button type="primary"  @click="downloadExl(2)">导出</el-button>
            <p class='pager-info-test'>试卷id:<span class='pager-span-test'>{{pagerData.id}}</span></p>
            <p class='pager-info-test'>试卷名称:<span class='pager-span-test'>{{pagerData.name}}</span></p>
            <p class='pager-info-test'>试卷创建时间:<span class='pager-span-test'>{{pagerData.createdAt}}</span></p>
            <p class='pager-info-test'>试卷最后修改试卷:<span class='pager-span-test'>{{pagerData.updatedAt}}</span></p>
            <p class='pager-info-test'>试卷备注:<span class='pager-span-test'>{{pagerData.remark}}</span></p>
            <p class='pager-p-block'>试题信息:</p>
            <div v-for="(block,index) in pagerData.blocks">
                <p class='pager-p-block'>模块{{index + 1}}、{{block.name}}</p>
                <div v-for="(question,index) in block.questions">
                    <p class='pager-p-question'>{{index + 1}}、{{question.type}}: {{question.main}}</p>
                    <p v-if="question.hasRelation" class='pager-relation-test'>{{question.relationDescribe}}</p>
                    <div v-for="(answer,index) in question.answers">
                        <p class='pager-p-anwser'>
                         选项{{index + 1}}  
                        <span class='pager-check-test' v-if="answer.checked">(选中输入)</span>
                        <span class='pager-sorce-test' v-if="answer.hasScore">({{ answer.score }}分)</span>
                         :{{answer.main}}
                        </p>
                    </div> 
                </div>
            </div>
        </el-dialog>
         <el-dialog
        title="代码信息"
        v-model="codeVisible">
            <p class='pager-info-test'>试题信息代码:<span class='pager-span-test'>{{codeData.block}}</span></p>
            <p class='pager-info-test'><span class='pager-check-test'>
            name(string):问卷模块名<br/>
            questionId(int数组):模块内题目id</span></p><br/>
            <p class='pager-info-test'>关联信息代码:<span class='pager-span-test'>{{codeData.relation}}</span></p>
            <p class='pager-info-test'><span class='pager-check-test'>
            has_relation(boolean):是否有题目前后关联<br/>
            relations(对象数组):题目关联信息<br/>
            pre_ids(int数组):第一个值为前置题目id,第二个值为前置题目选项<br/>
            next_id(int):后置题目id</span></p>
        </el-dialog>
    </div>
</template>

<script>
    import PagersJs from './Pagers.js';
    module.exports = PagersJs;
</script>

<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .pager-p-block{
      color:#222;
      margin-top:10px;
      margin-left:10px;
  }
  .pager-p-question{
      color:#444;
      margin-top:5px;
      margin-left:20px;
  }
  .pager-p-anwser{
      color:#000;
      margin-left:30px;
  }
  .pager-span-test{
      color:#999;
      margin-left:10px;
  }.pager-info-test{
      color:#000;
      margin-left:10px;
  }.pager-remark-test{
      color:#bbb;
      margin-left:10px;
  }.pager-relation-test{
      color:#f00;
      margin-left:30px;
  }.pager-check-test{
      color:#f00;
  }.pager-sorce-test{
      color:#f00;
  }
</style>